<template>
	<view class="publish">
		<scroll-view class="scroll1" scroll-y>
		<textarea  class="publish-input" auto-height="true" maxlength="-1" :placeholder="$t('home.pub_tips1')"
		@input="actInput"  v-model="inputText"
		/>
		</scroll-view>
		<view class="publish-handle">
			<view class="publish-handle_content u-flex u-row-between">
			<view class="publish-handle_left u-flex">
				<view class="publish-handle_right">{{$t('home.wordcount')}}:{{curlength}}</view>
			</view>
			<view @touchend.prevent="handleSendTextMessage" class="icon icon-fasong" style="color:#3370CC ;  font-size:66rpx;"></view>
			</view>
		</view>
		<view class="promptBox" v-if="developText !==''">			
			<view class="wrap" v-text="developText"></view>
			<view class="inner-promptBox">
				<view>
					<u-button size="mini" type="primary" @click="altInputText()" >{{inputText !== ''?$t('home.transtext'):$t('home.use')}}</u-button>
				</view>
				<view>
					<u-button size="mini" @click="delInputText()">{{$t('home.cancel1')}}</u-button>
				</view>	
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
	  defineComponent,
	  reactive,
	  toRefs,
	} from "vue";
	import {
		onLoad,
		onNavigationBarButtonTap,
	} from "@dcloudio/uni-app";
	import store from "@/pages/TUIKit/TUICore/store";
	export default defineComponent({
	  components: {
	  },
	setup(props:any,ctx:any) {
	    const TUIServer: any = uni.$TUIKit.TUIChatServer;
	    const data = reactive({
	      firstSendMessage: true,
	      inputText: '',
		  curlength:0,
		  text:'',
		  id:'',
		  developText:'',
	    });
	onLoad((opts) => {
		data.developText =  opts.text
		data.inputText = store.state.timStore.developtext
		})
	onNavigationBarButtonTap((e) => {
		if (e.text == '\ue74b') {
		data.inputText=''
		data.curlength=0
		store.commit("timStore/setDeveloptext","")
		}
	});
	const actInput=(e)=>{
		data.curlength = e.detail.cursor;
		store.commit("timStore/setDeveloptext",e.detail.value)
	};
	const handleSendTextMessage = (e: any) => {
	  if (data.inputText.trimEnd()) {
	    uni.$TUIKit.TUIChatServer.sendTextMessage(
	      JSON.parse(JSON.stringify(data.inputText))
	    );
		store.commit("timStore/setDeveloptext","")
	  }
	  data.inputText = "";
	  uni.hideKeyboard()
	  uni.navigateBack({
	  		delta:1,//返回层数，2则上上页
	  	})
	};
	//使用外面的内容
	const altInputText = () =>{
		data.inputText = data.developText
		data.developText = ''
	}
	//不使用内容
	const delInputText = ()=>{
		data.developText = ''
	}
		//清除消息
	const handleClearMessage = () => {
		const laststr: string = data.inputText.substr(data.inputText.length-1, 1)
		//判断该信息最后是不是表情
		if(laststr == ']') {
		//找出“[”最后出现的位置
			const index = data.inputText.lastIndexOf('[')
			//删除表情重新赋值
			data.inputText = data.inputText.substr(0,index)
			return
			}
			//如果信息内容最后一个字符不是表情,直接删除最后一个字符
	  data.inputText = data.inputText.substr(0,data.inputText.length -1)
		};
	return {
	      ...toRefs(data),
	      handleSendTextMessage,
		  handleClearMessage,
		  actInput,
		  altInputText,
		  delInputText,
	    };
	  },
	});
</script>

<style lang="scss" scoped>
	.scroll1{
		height: 100vh;
	}
	.publish {
		padding-bottom: 100rpx;
		min-height: 100vh;
		background-color: #fff;
		&-input{
			padding: 30rpx;
			width: 100%;
		}
	}
	.publish-handle {
		z-index: 999;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f1f1f1;

		&_content {
			padding: 0 30rpx;
			border-bottom: 1px solid #d7dada;
		}

		&_left {
			font-size: 48rpx;
			color: #777777;
		}
		&_right {
			color: #999999;
			font-size: 28rpx;
		}
	}
	.promptBox{
		box-shadow:0 0 10px #a3a3a3;
		// background-color: blue;
		border-radius: 12px;	
		position: fixed ;
		top: 50px;
		left: 20px;
	}
	.inner-promptBox{
		height: 25px;
		display: flex;
		margin-left: 5px;
		margin-top: 10px;
		margin-bottom: 5px;
	}
	.wrap {
	  margin-top: 5px;
	  margin-left: 10px;
	  margin-right: 5px;
	  max-width : 345px;
	  min-width: 90px;
	  table-layout: fixed;
	  // word-wrap: break-all;
	  word-break: break-word;
	  // overflow: hidden;
	}
</style>